<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="dialogShow"
      :with-header="true"
      size="50%"
      :before-close="onClose"
    >
      <hr>
      <el-row :gutter="15">
        <el-form ref="form" class="elform" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24" />
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属小区" prop="community_code">
              <el-select
                v-model="formData.community_code"
                placeholder="请选择所属小区"
                clearable
                size="small"
                :style="{ width: '100%' }"
                @change="getBuildChange"
              >
                <el-option
                  v-for="item in community_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属栋数" prop="building_code">
              <el-select
                v-model="formData.building_code"
                placeholder="请选择所属栋数"
                :style="{width: '100%'}"
                @change="getHouseChange"
              >
                <el-option
                  v-for="item in build_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属房产" prop="house_code">
              <el-select
                v-model="formData.house_code"
                placeholder="请选择所属房产"
                clearable
                :style="{width: '100%'}"
                @change="getMemberChange"
              >
                <el-option
                  v-for="item in house_codeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="所属成员" prop="member_id">
              <el-select
                v-model="formData.member_id"
                placeholder="请选择所属成员"
                clearable
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="item in memberOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="宠物名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入宠物名称" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="宠物颜色" prop="color">
              <el-input
                v-model="formData.color"
                placeholder="请输入宠物颜色"
                :style="{width: '100%'}"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="收养时间" prop="adopt_time">
              <el-date-picker
                v-model="formData.adopt_time"
                value-format="timestamp"
                type="date"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="-1px" label="备注">
              <el-input v-model="formData.remark" placeholder="请输入" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="宠物照片">
              <uploadImg ref="uploadUmage" :seeimage2="seeimage1" @pushImage="pushImage" @removeUrl="removeUrl" />
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <hr>
      <div class="demo-drawer__footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { communityInfo, communityBuild, buildHouse } from '@/api/owers/owers'
import { addPet, editPet, houseMember } from '@/api/owers/pet'
export default {
  components: {},
  props: {
    seeimage1: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogShow: false,
      imgList: [], // 图片回显
      formData: {
        building_code: '',
        community_code: '',
        house_code: '',
        member_id: '',
        name: '',
        remark: '',
        photo: '',

        color: ''
      },
      rules: {
        community_code: [{ required: true, message: '所属小区编号不可为空且检查类型', trigger: blur }],
        building_code: [{ required: true, message: '所属栋数编号不可为空且检查类型', trigger: blur }],
        house_code: [{ required: true, message: '房产编号不可为空且检查类型', trigger: blur }],
        name: [{ required: true, message: '宠物名称不可为空且检查类型', trigger: blur }],
        color: [{ required: true, message: '车辆颜色不为空且检查类型', trigger: blur }],
        member_id: [{ required: true, message: '主人不为空且检查类型', trigger: blur }]
      },
      community_codeOptions: [],
      build_codeOptions: [],
      house_codeOptions: [],
      memberOptions: []
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改宠物信息' : '添加宠物信息'
    }
  },
  watch: {},
  created() {
    this.communityInfo()
  },
  mounted() {},
  methods: {
    // 移除图片地址
    removeUrl(url) {
      console.log(url)
      this.imgList = this.imgList.filter(item => url !== item)
    },
    pushImage(url) {
      this.imgList.push(url)
    },
    // 处理生日
    getBirth(value) {
      // console.log('getBirth', value)
      const arr = []
      arr.push(this.formData.identity_id.substring(6, 10))
      arr.push(this.formData.identity_id.substring(10, 12))
      arr.push(this.formData.identity_id.substring(12, 14))
      this.formData.birth = arr.join('-')
    },
    // 获取小区
    async communityInfo() {
      const res = await communityInfo()
      // console.log(res)
      this.community_codeOptions = res.data.data
    },
    // 选择框改变获取小区对应楼栋
    async getBuild(val) {
      // console.log(val)
      const res = await communityBuild(val)
      this.build_codeOptions = res.data.data
    },
    async getBuildChange(val) {
      this.$set(this.formData, 'building_code', '')
      this.$set(this.formData, 'house_code', '')
      this.$set(this.formData, 'member_id', '')
      this.house_codeOptions = []
      this.memberOptions = []
      this.getBuild(val)
    },
    // 选择框改变获取小区对应楼栋对应房产
    async getHouse(val) {
      const res = await buildHouse(val)

      this.house_codeOptions = res.data.data
      // console.log('getHouse', this.house_codeOptions)
    },
    async getHouseChange(val) {
      this.$set(this.formData, 'house_code', '')
      this.$set(this.formData, 'member_id', '')
      this.memberOptions = []
      this.getHouse(val)
    },
    // 选择框改变获取小区对应楼栋对应房产对应成员姓名
    async getMember(val) {
      // console.log('getBuild', this.build_codeOptions)
      console.log(val, '楼栋')
      const res = await houseMember(val)
      // console.log(res)
      this.memberOptions = res.data.data
      console.log('this.memberOptions', this.memberOptions)
    },
    async getMemberChange(val) {
      this.$set(this.formData, 'member_id', '')
      this.getMember(val)
    },
    submitForm() {
      this.$refs['form'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        this.formData.photo = this.imgList.join(',')
        try {
          if (this.formData.id) {
            // 修改
            await editPet(this.formData)
            this.$message.success('修改成功')
          } else {
            // 新增
            await addPet(this.formData)
            this.$message.success('添加成功')
          }
          // 关闭弹框，通知父组件刷新数据
          // 关闭弹框
          this.onClose()
          // 列表更新
          this.$emit('updateList')
        } catch (err) {
          this.$message.error(this.formData.id ? '修改失败' : '添加失败')
        }
      })
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        building_code: '',
        community_code: '',
        house_code: '',
        member_id: '',
        name: '',
        remark: '',
        photo: '',
        color: ''

      }
      // 移除校验
      this.$refs.form.clearValidate()
      this.imgList = []
      this.$refs.uploadUmage.fileList = []
      // 关闭弹框
      this.dialogShow = false
      // 通知父组件清数据
      this.$parent.seeImage = []
    }
  }
}

</script>
<style lang='scss'>
.elform{
  padding: 20px;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}

.demo-drawer__content {
  height: 550px;
  overflow: scroll;
  overflow-x:hidden
}

.demo-drawer__footer{
  // position: fixed;
  // bottom: 0;
  // left: 0;
  float: right;
  margin-right: 30px;
}
.el-form-item__label{
  float: none;
  font-weight: normal;
}
.el-form-item__content{
  margin-left: 0 !important;
}
</style>
